
<template>
    <div>
        <div style="height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;">
            <div class="video" ref="player" v-show="isPlay" ></div>
            <div v-show="!isPlay" style="color: #08979C;font-size: 25px;">暂无视频源</div>
        </div>
    </div>
</template>
 
<script setup >
import FlvJsPlayer from 'xgplayer-flv';
import Player from 'xgplayer';
import {onMounted}from 'vue'
const isPlay = ref(false)
const player = ref({})
 
const visibilitychange = onMounted(() => {
    console.log('computed执行');
    document.addEventListener('visibilitychange', function () {
        // console.log(document.visibilityState);
        // console.log(document.hidden);
        if (document.hidden) {
            console.log("页面隐藏")
        }
    });
})
 
const createPlayer = (url, hasCloseBtn, index) => {
 
    console.log(url);
    console.log(hasCloseBtn);
    console.log(index);
 
    if (!url) {
        return;
    }
 
    // if (player) {
    //     changeVideo(url);
    //     return;
    // }
 
    isPlay.value = true;
    player.value = new FlvJsPlayer({
        // id: elId,
        url: url,
        // fitVideoSize: 'auto',
        fluid: true,
        autoplay: true,
        isLive: true,
        playsinline: false,
        screenShot: true,
        whitelist: [''],
        ignores: ['time'],
        closeVideoClick: true,
        // errorTips: '<span class="app-error">无视频源</span>',
        customConfig: {
            isClickPlayBack: false
        },
        flvOptionalConfig: {
            enableWorker: true,
            enableStashBuffer: true, //启用缓存
            stashInitialSize: 4096, //缓存大小4m
            lazyLoad: false,
            lazyLoadMaxDuration: 40 * 60,
            autoCleanupSourceBuffer: true,
            autoCleanupMaxBackwardDuration: 35 * 60,
            autoCleanupMinBackwardDuration: 30 * 60
        } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
    });
 
    // 自定义播放器按钮
    // let divStr =
    //   '<i class="btn-hover el-icon-camera button-screen-shot" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
    //   '<i class="btn-hover el-icon-s-tools button-set" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
    //   '<i class="btn-hover el-icon-video-camera-solid button-history" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>';
 
    let divStr = '<i class="btn-hover el-icon-d-arrow-left button-playback" style="font-size: 23px;pointer-events: auto;"></i>';
 
    let divClose = '<i @click="closePlayer" class="btn-hover el-icon-close app-close-btn-c"></i>';
 
    let util = Player.util;
    // let customBtn = util.createDom('div', divStr, {}, 'flex align-center justify-center app-player-button'); //'div', divStr, {}, 'class'
    let customBtn = util?.createDom(
        'div',
        divStr,
        { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' },
        'flex align-center justify-center app-player-button'
    ); //'div', divStr, {}, 'class'
    let closeBtn = util?.createDom('div', divClose, {}, 'app-close-btn');
    let xgControls = player.root?.querySelector('xg-controls');
    let xgError = player.root?.querySelector('xg-error');
    xgControls.appendChild(customBtn);
    player.root.appendChild(closeBtn);
 
    // let shot = customBtn.querySelector('.button-screen-shot');
    // let set = customBtn.querySelector('.button-set');
    // let history = customBtn.querySelector('.button-history');
    let closeBtnc = closeBtn.querySelector('.app-close-btn-c');
    let playback = customBtn.querySelector('.button-playback');
 
    player.on('play', () => { });
    player.on('focus', () => {
        if (hasCloseBtn) {
            closeBtn.style.display = 'block';
        }
    });
    player.on('ended', () => { });
    player.on('blur', () => {
        closeBtn.style.display = 'none';
    });
 
    player.on('error', () => { });
 
    if (closeBtnc) {
        closeBtnc.addEventListener('click', () => {
            closePlayer();
        });
    }
 
    // 点击视频时间，设置selectIndex
    // player.video.addEventListener('click', () => {
    //     $emit('clickPlayer', index);
    // });
}
 
const changeVideo = (url) => {
    player.src = url;
}
 
const closePlayer = () => {
    isPlay.value = false;
    if (player) {
        player.value.destroy();
    }
}
 
const playObjDestroy = () => {
    if (player) {
        player.value.destroy();
    }
    console.log('销毁了');
}
 
defineExpose({
    createPlayer,
    playObjDestroy
})
</script>